<template>
  <Row>
    <Col span="12">
        <p slot="title">表单验证</p>
        <Form :label-width="80" 
        :rules="ruleValidate" 
        ref="formValidate" 
        :model="formValidate">
          <FormItem label="公司名称" prop="company">
            <Input v-model="formValidate.company" placeholder="请输入公司名称"></Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
          </FormItem>
        </Form>
    </Col>
  </Row>
</template>
<script>
export default {
  name:'',
  data() {
    return {
      //默认值值设置
      formValidate: {
        company: "我",
      },
      ruleValidate: {
        company: [
          {
            required: true,
            message: "公司名称不能为空",
            trigger: "blur"
          }
        ],
      
      }
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>